<template>
  <div>
    <div class="m-3 p-3 pt-5 bg-white">
      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
    </div>
    <div class="m-3 p-3 bg-white">
      <vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }">
        <template #buttons>
          <a-space>
            <a-button preIcon="ant-design:sync-outlined" @click="importData">导入</a-button>
          </a-space>
        </template>
      </vxe-toolbar>
      <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading"
        :sort-config="{ remote: true, trigger: 'cell' }" @sort-change="sortChange">
        <vxe-column type="seq" title="序号" width="60" />
        <vxe-column field="name" title="姓名" :min-width="80" />
        <vxe-column field="idCard" title="身份证" :min-width="120" />
        <vxe-column field="phone" title="手机号" :min-width="120" />
        <vxe-column field="graduationSchool" title="毕业学校" :min-width="120" />
        <vxe-column field="specialityName" title="专业" :min-width="120" />
        <vxe-column field="grade" title="年级" :min-width="80">
          <template #default="{ row }">
            <span v-if="row.grade === 1">一年级</span>
            <span v-else-if="row.grade === 2">二年级</span>
            <span v-else-if="row.grade === 3">三年级</span>
            <span v-else>{{ row.grade }}</span>
          </template>
        </vxe-column>
        <vxe-column field="collectFees" title="代收费" :min-width="80" />
        <vxe-column field="accDation" title="住宿费" :min-width="80" />
        <!-- <vxe-column fixed="right" width="100" :showOverflow="false" title="操作">
          <template #default="{ row }">
            <span>
              <a-link danger @click="remove(row)">删除</a-link>
            </span>
          </template>
        </vxe-column> -->
      </vxe-table>
      <vxe-pager size="medium" :loading="loading" :current-page="pagination.current" :page-size="pagination.size"
        :total="pagination.total" @page-change="handleTableChange" />
    </div>

    <basic-import-modal ref="basicImportModal" @ok="queryPage" template-url="/studentSys/getTemplate"
      upload-url="/studentSys/importExecl" template-name="学生报名信息.xlsx" />
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import { $ref } from 'vue/macros'
import { page, del } from './StudentRegistration.api'
import useTablePage from '/@/hooks/bootx/useTablePage'
import BQuery from '/@/components/Bootx/Query/BQuery.vue'
import { useMessage } from '/@/hooks/web/useMessage'
import { QueryField, STRING, LIST } from '/@/components/Bootx/Query/Query'
import { VxeTableInstance, VxeToolbarInstance, VxePager, VxeTable, VxeToolbar } from 'vxe-table'
import ALink from '/@/components/Link/Link.vue'
import { FormEditType } from '/@/enums/formTypeEnum'
import BasicImportModal from '/@/components/Bootx/BasicImport/BasicImportModal.vue'
import { LabeledValue } from 'ant-design-vue/lib/select'
import { querySpPlan } from '../../demo/baoming/Baoming.api'

// 使用hooks
const { handleTableChange, pageQueryResHandel, sortChange, resetQueryParams, pagination, pages, sortParam, model, loading } =
  useTablePage(queryPage)
const { createMessage, createConfirm } = useMessage()

let specialityList = $ref<LabeledValue[]>([])
// 查询条件
const fields = computed(() => {
  return [
    { field: 'name', type: STRING, name: '姓名', placeholder: '请输入姓名' },
    { field: 'idCard', type: STRING, name: '身份证', placeholder: '请输入身份证' },
    { field: 'phone', type: STRING, name: '手机号', placeholder: '请输入手机号' },
    { field: 'graduationSchool', type: LIST, name: '毕业学校', placeholder: '请输入毕业学校', selectList: schoolList },
    { field: 'grade', type: STRING, name: '年级', placeholder: '请输入年级' },
    { field: 'specialityId', type: LIST, name: '专业', placeholder: '请输入专业', selectList: specialityList },
  ] as QueryField[]
})

let schoolList = [
  { label: '凤山中学', value: '凤山中学' },
  { label: '骆驼坳中学', value: '骆驼坳中学' },
  { label: '匡河中学', value: '匡河中学' },
  { label: '白莲河中学', value: '白莲河中学' },
  { label: '北丰中学', value: '北丰中学' },
  { label: '大河岸中学', value: '大河岸中学' },
  { label: '白庙河中学', value: '白庙河中学' },
  { label: '九资河中学', value: '九资河中学' },
  { label: '实验中学', value: '实验中学' },
  { label: '三里畈中学', value: '三里畈中学' },
  { label: '大崎中学', value: '大崎中学' },
  { label: '双凤坳中学', value: '双凤坳中学' },
  { label: '落梅河中学', value: '落梅河中学' },
  { label: '胜利中学', value: '胜利中学' },
  { label: '思源学校', value: '思源学校' },
  { label: '义水学校', value: '义水学校' },
  { label: '平湖中学', value: '平湖中学' },
  { label: '外县学校', value: '外县学校' },
]

const xTable = $ref<VxeTableInstance>()
const xToolbar = $ref<VxeToolbarInstance>()
const basicImportModal = $ref<any>()

onMounted(() => {
  vxeBind()
  initData()
  queryPage()
})
function vxeBind() {
  xTable?.connect(xToolbar as VxeToolbarInstance)
}

/**
 * 初始化数据
 */
async function initData() {
  querySpPlan({
    type: 1
  }).then(res => {
    console.log(res.data)
    specialityList = res.data.map(item => {
      return {
        label: item.specialityName,
        value: item.id
      }
    })
  })
}

/**
 * 分页查询
 */
function queryPage() {
  loading.value = true
  // 查询列表
  page({
    ...model.queryParam,
    ...pages,
    ...sortParam,
  }).then(({ data }) => {
    pageQueryResHandel(data)
  })
  return Promise.resolve()
}

/**
 * 删除
 */
function remove(record) {
  createConfirm({
    iconType: 'warning',
    title: '警告',
    content: `确定需要删除【${record.name}】吗？`,
    onOk: () => {
      del(record.orderNo).then(() => {
        createMessage.success('删除成功')
        queryPage()
      })
    },
  })
}

function importData() {
  basicImportModal.init()
}
</script>

<style lang="less" scoped></style>
